<template>
  <div class="number-keyboard">
    <div class="right_content_input">
      <lay-row>
        <lay-col md="4" class="t_title_col"> 输入金额： </lay-col>
        <lay-col md="12">
          <lay-input
            v-model="payAmountShow"
            placeholder="0.00"
            @blur="changeMoney"
          ></lay-input>
        </lay-col>
        <lay-col md="8">
          <span
            style="
              margin-left: 10px;
              color: red;
              font-size: 16px;
              font-weight: 600;
            "
            >{{ pendingComp }}</span
          >
        </lay-col>
      </lay-row>
    </div>
    <div class="right_content_numkeyboard">
      <div class="keyboard-num">
        <div class="keyboard-num-item" v-for="item in btnList" :key="item.key">
          <lay-button type="default" @click="clickBtn(item)">{{
            item.value
          }}</lay-button>
        </div>
      </div>

      <div class="keyboard-recommend">
        <div
          class="keyboard-recommend-item"
          v-for="item in recommendList"
          :key="item.key"
        >
          <lay-button type="normal" @click="setAmont(item)">{{
            item.value
          }}</lay-button>
        </div>
      </div>

      <div class="keyboard-option">
        <div class="keyboard-option-item">
          <lay-button type="primary" @click="balanceMethod(9)">结算</lay-button>
        </div>
        <div class="keyboard-option-item">
          <lay-button type="danger">退出</lay-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch, onMounted, computed } from "vue";
import XEUtils, { first } from "xe-utils";
import { pay as payApi } from "@/apis/cashierApi";
import { layer } from "@layui/layui-vue";

const props = defineProps({
  paymentInfo: {
    type: Object,
    default: {},
  },
  dbInfo: { type: Object, default: () => {} },
});

//定义参数
const payAmount = ref(0); //支付金额
const payAmountShow = ref(null); //支付金额

const formartMoney = (value) => {
  //格式化金额
  const num = XEUtils.toNumber(value);
  payAmountShow.value = XEUtils.commafy(XEUtils.floor(num, 2), { digits: 2 });
};

//数字键盘
const btnList = ref([
  { key: 7, value: "7" },
  { key: 8, value: "8" },
  { key: 9, value: "9" },
  { key: 4, value: "4" },
  { key: 5, value: "5" },
  { key: 6, value: "6" },
  { key: 1, value: "1" },
  { key: 2, value: "2" },
  { key: 3, value: "3" },
  { key: 0, value: "0" },
  { key: ".", value: "." },
  { key: "back", value: "回退" },
]);

//推荐金额
const recommendList = ref([
  { key: 10, value: "10" },
  { key: 20, value: "20" },
  { key: 50, value: "50" },
  { key: 100, value: "100" },
]);

const changeMoney = () => {
  // console.log("changeMoney-->", value);
  payAmount.value = XEUtils.floor(XEUtils.toNumber(payAmountShow.value), 2);
};
//设置推荐金额
const setAmont = (item) => {
  console.log("设置金额-->", item);
  payAmount.value = item.value;
};

//点击结算方法
const balanceMethod = async (payway) => {
  const params = {
    dbid: props.dbInfo.dbid,
    sign: props.dbInfo.sign,
    payway: payway, //现金支付默认为9
    total_amount: payAmount.value,
    dynamic_id: "",
    operator: props.dbInfo.operator,
    remark: "",
  };
  console.log("结算-->", params);
  const res = await payApi(params);
  if (res.code == 200) {
    layer.msg(msg, { icon: 6 });
  } else {
    layer.msg(msg, { icon: 5 });
  }
};

//点击数字键盘事件
const clickBtn = (item) => {
  console.log(item);
  let num = payAmount.value == 0 ? "" : payAmount.value.toString();

  //删除一个数子
  if (item.key === "back") {
    if (num.length > 0) {
      num = num.slice(0, -1);
    }
  } else if (item.key == ".") {
    //只能有一个小数点
    if (num.indexOf(".") === -1) {
      num += ".";
    }
  } else {
    //点击的数字
    num += item.value;
    // num = XEUtils.floor(XEUtils.toNumber(num), 2);
  }
  if (num.indexOf(".") != -1) {
    num.split(".")[1].length > 2
      ? (num = num.slice(0, num.indexOf(".") + 3))
      : num;
  }
  formartMoney(num);
  payAmount.value = num;
};

//初始化推荐金额按钮
const setRecMonentMonet = (money) => {
  money = XEUtils.toNumber(money);
  let fristMoney = XEUtils.ceil(money);
  let secondMoney = XEUtils.ceil(fristMoney / 10) * 10;
  if (secondMoney == fristMoney) {
    secondMoney = XEUtils.ceil(XEUtils.add(secondMoney, 10));
  }
  let thirdMoney = XEUtils.ceil(secondMoney / 100) * 100;

  if (secondMoney == thirdMoney) {
    secondMoney = XEUtils.ceil(XEUtils.add(secondMoney, 100));
  }
  let fourthMoney = XEUtils.ceil(XEUtils.add(thirdMoney, 100));

  recommendList.value = [
    { key: fristMoney, value: XEUtils.commafy(fristMoney, { digits: 2 }) },
    { key: secondMoney, value: XEUtils.commafy(secondMoney, { digits: 2 }) },
    { key: thirdMoney, value: XEUtils.commafy(thirdMoney, { digits: 2 }) },
    { key: fourthMoney, value: XEUtils.commafy(fourthMoney, { digits: 2 }) },
  ];
};

const initPage = () => {
  //拿不到数据, 设置100ms后执行
  setTimeout(() => {
    console.log("numberKeyboard", props.paymentInfo, props.dbInfo.dbid);
    setRecMonentMonet(props.paymentInfo.pendingPayment);
  }, 100);
};

const pendingComp = computed(() => {
  return XEUtils.subtract(props.paymentInfo.pendingPayment, payAmount.value);
});

watch(payAmount, (value) => {
  if (value) {
    formartMoney(value);
  } else {
    payAmount.value = 0;
    payAmountShow.value = null;
  }
});

onMounted(() => {
  initPage();
});
</script>

<style lang="less" scoped>
.number-keyboard {
  height: 100%;
  width: 100%;
  background: #eee;
  // display: flex;
  // justify-content: space-between;
  .right_content_input {
    height: 36px;
    width: 100%;
    line-height: 36px;
    padding: 5px;
    box-sizing: border-box;
    .t_title_col {
      text-align: center;
      background: #ffbca7;
    }
    .layui-col :deep(.layui-input .layui-input-wrapper input) {
      text-align: end;
      padding-right: 20px;
    }
  }
  .right_content_numkeyboard {
    height: calc(100% - 40px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .keyboard-num {
    width: 47%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    .keyboard-num-item {
      width: 33.33%;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        width: 80px;
        height: 50px;
        background: #fff;
      }
    }
  }
  .keyboard-recommend {
    width: 24%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    .keyboard-recommend-item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      button {
        width: 100%;
        height: 50px;
      }
    }
  }
  .keyboard-option {
    width: 24%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    .keyboard-option-item {
      width: 100%;
      height: 123px;
      display: flex;
      button {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
